<template>
  <div class="login_container">
    <img src="@/assets/images/login-b.jpg" class="login-b" alt="" />
    <vue-particles
      color="#dedede"
      :particleOpacity="0.9"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="login_box">
      <div class="avatar_box">
        <img :src="config_info.image_url" alt="" />
      </div>
      <h2 class="coonfig-name">{{ config_info.name }}</h2>
      <el-form class="login_form" :model="form" :rules="rules" ref="ref">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入用账号"
            v-model="form.username"
            prefix-icon="iconfont icon-yonghu"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            type="password"
            v-model="form.password"
            prefix-icon="iconfont icon-password"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="info" @click="reset_form()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      config_info: {},
      form: {
        username: "admin",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入账号！", trigger: "blur" },
          { min: 4, max: 14, message: "账号长度在4到14个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
          { min: 4, max: 14, message: "密码长度在4到14个字符", trigger: "blur" }
        ]
      },
      width: window.innerWidth,
      height: window.innerHeight
    };
  },
  created() {
    this.get_config();
  },
  methods: {
    // 获取配置信息
    get_config() {
      const configInfo = this.$store.state.config.configInfo;
      if (configInfo.name) {
        this.config_info = configInfo;
      } else {
        this.$base.request(
          {
            that: this,
            url: "auth/auth_config/config_info"
          },
          res => {
            if (res.code === 8888) {
              this.config_info = res.data;
              this.$store.commit("config/setConfigInfo", res.data);
            }
          }
        );
      }
    },
    login() {
      this.$refs.ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "POST",
              url: "auth/login/login",
              data: this.form
            },
            res => {
              if (res.code === 8888) {
                localStorage.setItem("token", res.data.token);
                localStorage.setItem("token_type", res.data.token_type);
                // this.$Cookies.set('token', res.data.token, { expires: this.$config.cookiedate })
                // this.$Cookies.set('token_type', res.data.token_type, { expires: this.$config.cookiedate })
                this.$base.message({ that: this, message: res.msg });
                this.$router.push("/");
              }
            }
          );
        }
      });
    },
    reset_form() {
      this.$refs.ref.resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "login.scss";
</style>
